<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0095d7">
      <h1 style="color: white;font-size: 22px">
        锐晨后台管理系统
       <!-- <span v-if="user.nickname!=null"
              style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>-->
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu style="height: 500px" @select="handleSelect" default-active="2" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>案例管理</span>
            </template>
            <el-menu-item index="1-1">案例列表</el-menu-item>
            <el-menu-item index="1-2">添加案例</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-table v-if="currentIndex=='1-1'" :data="casesArr" style="width: 100%">
          <!--type=index 设置这一列显示的内容为编号-->
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="name" label="案例名称" width="200"></el-table-column>
          <el-table-column prop="style" label="风格" width="80"></el-table-column>
          <el-table-column prop="type" label="户型" width="80"></el-table-column>
          <el-table-column prop="area" label="面积" width="80"></el-table-column>
          <el-table-column
                  label="封面"
                  width="100">
            <template slot-scope="scope">
              <!--scope.row代表当前行对应数组中的对象-->
              <img :src="scope.row.cover" width="100" height="100">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--scope里面装着当前行所对应的对象信息
            scope.$index 得到当前行对应的对象在数组中的下标
            scope.row 得到当前行对应的对象
            -->
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="cachesSelectImgById(scope.row)">详情</el-button>
              <el-button size="mini" type="success" @click="caseUpdate(scope.row)">修改</el-button>
              <el-popconfirm
                      title="您确定删除此商品吗?"
                      @confirm="caseDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference"  size="mini"
                           type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        currentIndex:"1-1",
        casesArr:[]
      }
    },
    methods: {
      //删除案例
      caseDelete(index,cases){
        //发出删除商品请求
        axios.get("/casse/delete?id="+cases.id).then(function () {
          v.casesArr.splice(index,1);
        })
      },
      //案例详情
      cachesSelectImgById(Case){
        location.href="/selectCaseAdmin.html?id="+Case.id;

      },
      //案例添加
      handleSelect(key,keyPath){
        if (key=='1-2') {
          location.href="/insertCases.html";
        }
      }
    },
    created:function () {
      axios.get("/cases/select/admin").then(function (response){
        v.casesArr = response.data;
      })
    }
  })
</script>
</html>